<template>
	<view class="GrounpTrue">
		<view class="header">
			<view></view>
			<view>预约信息</view>
		</view>
		<view class="myTable">
			<uni-table border stripe emptyText="暂无更多数据">
				<uni-tr>
					<uni-td align="right">课程:</uni-td>
					<uni-td>{{Grounpmake.courseName}}</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td align="right"> 日期:</uni-td>
					<uni-td>{{Grounpmake.dateYMD}}</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td align="right">时间:</uni-td>
					<uni-td>{{Grounpmake.classTime}}</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td align="right">场馆:</uni-td>
					<uni-td>{{Grounpmake.courseVenues}}</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td align="right">场地:</uni-td>
					<uni-td>{{Grounpmake.courseSite}}</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td align="right">成团人数:</uni-td>
					<uni-td>{{Grounpmake.allowAppoint}}</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td align="right">教练:</uni-td>
					<uni-td>{{Grounpmake.courseCoach}}</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td align="right">
						<text>*</text>
						课时:
					</uni-td>
					<uni-td>
						<view>
							<uni-data-checkbox v-model="value" :multiple="false" :localdata="range" mode="tag" />
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>
			<view class="beizhu">
				<textarea :value="couserText" placeholder="填写预约备注,该信息会被教练看到" />
			</view>
		</view>
		<view class="GrounTime">
			<view>
				预约时间
			</view>
			<view class="timeYu">
				<view>
					<view v-for="v in myweek">
						{{v}}
					</view>
				</view>
				<view>
					<view v-for="(v,i) in myday" @click="timeChange(i)" :class="coltype==i?'class_col':''">
						{{v}}
					</view>
				</view>
				<view class='clock'>
					<view v-for="(v,i) in yutime" @click="clockChange(i)"
						:class="colcolok==i?'class_clock':'class_clock1'">
						<view>{{v.clock}}</view>
						<view>{{v.type}}</view>
					</view>
				</view>
			</view>
			<view></view>

		</view>
		<view class="header">
			<view></view>
			<view>选择支付方式</view>
		</view>
		<view class="pay">
			<radio-group name="" @change="wx">
				<label>
					<radio value="微信支付" />
					<view>
						<text class="iconfont icon-weixin"></text>
						<text>微信支付</text>
					</view>
				</label>
				<label>
					<radio value="会员卡" />
					<view>
						<text class="iconfont icon-yinhangqia"></text>
						<text>会员卡</text>
					</view>
				</label>
			</radio-group>
		</view>
		<view class="header">
			<view></view>
			<view>温馨提示</view>
		</view>
		<view class="prompt">
			<view>• 预约成后自动扣除相应的费用。</view>
			<view>• 取消预约不扣除费用。</view>
		</view>
	</view>
	<view class="footer">
		<view>
			<view>
				<view class="iconfont icon-dianhua"></view>
				<view>联系教练</view>
			</view>
		</view>

		<view>
			<button type="default" @click="promptTrue">
				提交预约并支付
			</button>
		</view>
	</view>
	<view>
		<!-- 提示窗 -->
		<uni-popup ref="popup" background-color="#fff" @change="change">
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }"><text
					class="text">请选择支付方式</text></view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		reactive,
		toRefs
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import myRequest from '../../../utils/myRequest.js'
	export default {
		setup() {
			const data = reactive({
				Grounpmake: [],
				numVal: 0,
				couserText: '',
				c: '',
				type: 'center',
				//单选
				wx(a) {
					data.c = a.detail.value
				},
				//提交预付并支付
				promptTrue() {
					if (!data.c) {
						this.toggle('center')
						return
					}
					uni.showModal({
						content: '确认要预约该课程？',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: "PersonalSuccess?c=" + data.Grounpmake.classmoney +
										'&wx=' + data.c
								})
							} else if (res.cancel) {

							}
						}
					})
				},
				value: [0, 1, 2],
				range: [{
						"value": 0,
						"text": '1课时'
					},
					{
						"value": 1,
						"text": '5课时'
					},
					{
						"value": 2,
						"text": '10课时'
					},
				],
				//预约时间
				coltype: 1,
				timeChange: function(i) {
					this.coltype = i
				},
				myweek: [],
				myday: [],
				colcolok: 0,
				yutime: [{
						clock: '09:00',
						type: '可约'
					},
					{
						clock: '10:00',
						type: '不可约'
					},
					{
						clock: '11:00',
						type: '可约'
					},
					{
						clock: '12:00',
						type: '不可约'
					},
					{
						clock: '13:00',
						type: '不可约'
					},
					{
						clock: '14:00',
						type: '不可约'
					},
					{
						clock: '15:00',
						type: '可约'
					},
					{
						clock: '16:00',
						type: '不可约'
					},
					{
						clock: '17:00',
						type: '不可约'
					},
					{
						clock: '18:00',
						type: '不可约'
					},
					{
						clock: '19:00',
						type: '不可约'
					},
					{
						clock: '20:00',
						type: '可约'
					},
					{
						clock: '21:00',
						type: '不可约'
					},
					{
						clock: '22:00',
						type: '可约'
					},
					{
						clock: '23:00',
						type: '不可约'
					}
				],
				clockChange: function(i) {
					this.colcolok = i
				},
				//是否支付的时候的弹框
				toggle(type) {
					this.type = type
					// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
					this.$refs.popup.open(type)
				},
				//init加载的预约时间
				init() {
					let today = new Date();
					let myWeek = today.getDay()

					function getmyDay(day) {
						let today = new Date();
						let targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day
						today.setTime(targetday_milliseconds)
						let tDate = today.getDate()
						return tDate
					}
					for (let i = 0; i <= 6; i++) {
						data.myday.push(getmyDay(i))
						if (myWeek < 6) {
							data.myweek.push('周' + '日一二三四五六' [myWeek])
							myWeek++
						} else {
							data.myweek.push('周' + '日一二三四五六' [myWeek])
							myWeek = 0
						}
					}
				},
				//数据的加载
				datainit() {
					myRequest({
						url: '/getvenuesId',
						data: {
							id: data.Grounpmake.courseVenues
						},
					}).then((res1) => {
						let mydata = res1.data.data
						this.Grounpmake.courseVenues = mydata[0].venuesName
						myRequest({
							url: '/site',
							data: {
								id:data.Grounpmake.courseSite
							},
						}).then((res2)=>{
							this.Grounpmake.courseSite = res2.data.data[0].siteName
						})
					})
				}
			});
			onLoad((option) => {
				data.Grounpmake = JSON.parse(decodeURIComponent(option.data))
				// console.log(data.Grounpmake)
				data.init()
				data.datainit()
			})
			return {
				...toRefs(data)
			}
		}
	}
</script>

<style lang="scss">
	@import url('~@/static/font-li/font2022/iconfont.css');

	.GrounpTrue {
		margin-bottom: 150rpx;
	}

	.header {
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #8F939C;
		height: 130rpx;
		padding: 0 20rpx;
	}

	.header>view:first-child {
		height: 40rpx;
		width: 8rpx;
		background: #6666FF;
		margin-right: 15rpx;
	}

	.header>view:last-child {
		font-weight: bold;
		font-size: 35rpx;
	}

	.myTable {
		padding: 20rpx;
	}

	.myTable text {
		color: red;
	}

	.beizhu {
		display: flex;
		justify-content: center;
		margin-top: 10rpx;
	}

	.beizhu>textarea {
		width: 600rpx;
		height: 120rpx;
		border: 1rpx #8F939C solid;
		border-radius: 20rpx;
		padding: 10rpx;
	}

	.pay label {
		display: flex;
		height: 100rpx;
		border-bottom: 1rpx solid #8F939C;
		align-items: center;
		padding: 0 20rpx;
	}

	.prompt {
		padding: 0 20rpx;
	}

	.prompt>view {
		margin-top: 10rpx;
		font-size: 30rpx;
	}

	.footer {
		display: flex;
		border: 1rpx solid #D8D8D8;
		position: fixed;
		bottom: 0;
		background: #FFFFFF;
		width: 750rpx;
		height: 130rpx;
	}

	.footer>view {
		flex: 1;
	}

	.footer>view:first-child {
		display: flex;
		justify-content: space-around;
		align-items: center;
		color: #A5A4A4;

	}

	.footer>view:first-child>view>view:first-child {
		text-align: center;
		font-size: 35rpx;
		margin-bottom: 10rpx;
	}

	.footer>view:last-child button {
		width: 100%;
		height: 100%;
		line-height: 130rpx;
		background: #007AFF;
		color: #FFFFFF;
	}

	/* 预约时间 */
	.GrounTime>view:first-child {
		font-size: 35rpx;
		margin-top: 40rpx;
		font-weight: 700;
		margin-left: 20rpx;
		border-left: 4px solid blue;
		padding-left: 10rpx;
	}

	.timeYu>view {
		height: 80rpx;
		display: flex;
		justify-content: space-around;
		align-items: center
	}

	.timeYu>view>view {
		width: 80rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
	}

	.class_col {
		border-radius: 40rpx;
		background-color: #000000;
		color: #FFFDEF;
	}

	//几点是否可预约按钮
	.timeYu>.clock {
		display: flex;
		height: 350rpx;
		// border: 1px solid blue;
		justify-content: space-between;
		flex-wrap: wrap;
		align-items: flex-start;
		padding: 20rpx 10rpx;

	}

	.timeYu>.clock>view {
		width: 130rpx;
		height: 100rpx;
		// background-color: #F2F2F2;
		margin-bottom: 10rpx;
	}

	.timeYu>.clock>view view {
		height: 50rpx;
		line-height: 50rpx;
	}

	.class_clock {
		background-color: #00aaff;
		color: white;
	}

	.class_clock1 {
		background-color: #F2F2F2;
		color: black;
	}

	//是否预约弹框
	@mixin flex {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	@mixin height {
		/* #ifndef APP-NVUE */
		height: 100%;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex: 1;
		/* #endif */
	}

	.popup-content {
		@include flex;
		align-items: center;
		justify-content: center;
		padding: 15px;
		height: 50px;
		background-color: #fff;
	}

	.popup-height {
		@include height;
		width: 200px;
	}
</style>
